<template>
  <el-form class="add-event-push" v-if="wbData">
    <el-divider content-position="center">分享内容设置</el-divider>
    <input-normal type="number" label="每天每个用户限制数" v-model="wbData.day_limit"  @change="onUpdateWbComponent"></input-normal>
    <switch-normal v-model="wbData.isReplace" label="单个发博图片" @change="onUpdateWbComponent"></switch-normal>
    <switch-normal v-model="wbData.isReplaceShareData" label="替换动态图片" @change="onUpdateWbComponent"></switch-normal>
    <switch-normal v-model="wbData.isRandom" label="多博文分享" @change="onUpdateWbComponent"></switch-normal>
    <switch-normal v-model="wbData.isSame" label="UI与发博图片是否相同" @change="onUpdateWbComponent"></switch-normal>
    <template v-if="wbData.isRandom">
      <switch-normal label="多博文随机分享" v-model="wbData.isRandomPush" @change="onUpdateWbComponent"></switch-normal>
      <switch-normal v-if="wbData.isRandomPush" v-model="wbData.isGiveOther" label="提供数据给关联组件" @change="onUpdateWbComponent"></switch-normal>
      <switch-normal v-else v-model="wbData.isGetOther" label="获取组件提供数据" @change="onUpdateWbComponent"></switch-normal>
      <input-normal v-if="wbData.isGiveOther || wbData.isGetOther" label="关联组件id" v-model="wbData.relateCompId"  @change="onUpdateWbComponent"></input-normal>
      <el-button type="primary"  @click.stop="onAddWbItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in eventWbLists" :name="index+1" :key="index">
            <template #title>
            随机内容{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
          </template>
          <textarea-normal class="margin-top-10" label="发博文本" placeholder="请在此处输入要分享的博文内容" v-model="item.text" @change="onUpdateWbItem(index)"></textarea-normal>
          <input-normal label="分享博文mid" v-model="item.mid"  @change="onUpdateWbItem(index)"></input-normal>
          <switch-normal v-model="item.isPic" label="博文带图片" @change="onUpdateWbItem(index)"></switch-normal>
          <template v-if="item.isPic">
            <switch-normal v-model="item.isRandomPic" label="随机转发一个博文图片" @change="onUpdateWbItem(0)"></switch-normal>
            <add-push-item :item="item" :index="index" :controlId="event.controlId"></add-push-item>
            <div v-if="!wbData.isSame" class="margin-left-right-16">
              <p>与转发博文对用的UI图</p>
              <add-img-con :url="item.url" picAttr="url" :index="index" :event="event" :height="100"></add-img-con>
            </div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-else-if="eventWbLists[0]">
      <textarea-normal label="博文内容" placeholder="请在此处输入要分享的博文内容" v-model="eventWbLists[0].text" @change="onUpdateWbItem(0)"></textarea-normal>
      <switch-normal v-model="eventWbLists[0].isPic" label="博文带图片" @change="onUpdateWbItem(0)"></switch-normal>
      <div v-if="eventWbLists[0].isPic">
        <switch-normal v-model="eventWbLists[0].isRandomPic" label="随机转发一个博文图片" @change="onUpdateWbItem(0)"></switch-normal>
        <add-push-item :item="eventWbLists[0]" :index="0" :controlId="event.controlId" class="margin-left-right-16"></add-push-item>
        <div v-if="!wbData.isSame" class="margin-left-right-16">
          <p>与转发博文对用的UI图</p>
          <add-img-con :url="eventWbLists[0].url" picAttr="url" :index="0" :event="event" :height="100"></add-img-con>
        </div>
      </div>
      <textarea-normal label="失败博文内容" placeholder="请在此处输入要分享的失败博文内容" v-model="wbData.failText" @change="onUpdateWbComponent"></textarea-normal>
    </template>
  </el-form>
</template>


<script setup lang="ts">
import AddPushItem from '@/views/components/add-push-item.vue'
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { getWbListByItem } from '@/components/utils'
import { WbComponentDatas } from '@/const/web/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()

const  activeNames = [1]
let wbData_: any
const wbData = computed(() => {
  try {
    wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data && useWebControls.currentControls![event.controlId].data
  } catch (error) {
    console.log("controlData.data null")
  }
  return wbData_
})
let wbLists_: any[]
const eventWbLists = computed(() => {
  if(wbData_.elements) {
    wbLists_ = wbData_.elements
  }
  return wbLists_
})
const onUpdateWbComponent = () => {
  useWebControls.updateWbComponent({ controlId: event.controlId, data: wbData_ })
}
const onAddWbItem = (e: any) => {
  e.stopPropagation()
  e.preventDefault()
  const controlId = event.controlId
  let item: any
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  if(wbList[0]) {
    item = _.cloneDeep(wbList[0])
    item.mid = ''
  } else {
    item = _.cloneDeep(WbComponentDatas[event.controlId].data.elements[0])
  }
  useWebControls.addWbComponentItem({controlId, item})
}
const onDeleteWbItem = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const params = {controlId: event.controlId, index}
  useWebControls.deleteWbComponentItem(params)
}
const onUpdateWbItem = (index: number) => {
  const controlId = event.controlId
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  const params = {item: wbList[index], index, controlId}
  useWebControls.updateWbComponentItem(params)
}
</script>
